<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>i5ting_ztree_toc:README</title>
  <link href="toc/style/github-bf51422f4bb36427d391e4b75a1daa083c2d840e.css" media="all" rel="stylesheet"
    type="text/css" />
  <link href="toc/style/github2-d731afd4f624c99a4b19ad69f3083cd6d02b81d5.css" media="all" rel="stylesheet"
    type="text/css" />
  <link href="toc/css/zTreeStyle/zTreeStyle.css" media="all" rel="stylesheet" type="text/css" />
  <style>
    pre {
      counter-reset: line-numbering;
      border: solid 1px #d9d9d9;
      border-radius: 0;
      background: #fff;
      padding: 0;
      line-height: 23px;
      margin-bottom: 30px;
      white-space: pre;
      overflow-x: auto;
      word-break: inherit;
      word-wrap: inherit;
    }

    pre a::before {
      content: counter(line-numbering);
      counter-increment: line-numbering;
      padding-right: 1em;
      /* space after numbers */
      width: 25px;
      text-align: right;
      opacity: 0.7;
      display: inline-block;
      color: #aaa;
      background: #eee;
      margin-right: 16px;
      padding: 2px 10px;
      font-size: 13px;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    pre a:first-of-type::before {
      padding-top: 10px;
    }

    pre a:last-of-type::before {
      padding-bottom: 10px;
    }

    pre a:only-of-type::before {
      padding: 10px;
    }

    .highlight {
      background-color: #ffffcc
    }

    /* RIGHT */
  </style>
</head>

<body>
  <div>
    <div style='width:25%;'>
      <ul id="tree" class="ztree" style='width:100%'>

      </ul>
    </div>
    <div id='readme' style='width:70%;margin-left:20%;'>
      <article class='markdown-body'>
        <p>ScaleOrder前端技术文档</p>
        <p>项目架构</p>
        <ul>
          <li>
            <p>Vue3：采用 Vue3 + script setup 最新的 Vue3 组合式 API</p>
          </li>
          <li>
            <p>Element Plus：Element UI 的 Vue3 版本</p>
          </li>
          <li>
            <p>Vite：快速构建编译</p>
          </li>
          <li>
            <p>Vue Router：路由</p>
          </li>
          <li>
            <p>TypeScript：JavaScript 语言的超集(只写必要部分)</p>
          </li>
          <li>
            <p>Scss：和 Element Plus 保持一致</p>
          </li>
          <li>
            <p>ESlint：代码校验</p>
          </li>
          <li>
            <p>Prettier：代码格式化</p>
          </li>
          <li>
            <p>Axios：发送网络请求（已封装好）</p>
          </li>
        </ul>
        <p>项目目录</p>
        <pre><code>├─ .vscode # 本项目推荐的 vscode 配置和拓展

├─ public

│ ├─ favicon.ico

│ ├─ app-loading.css # 首屏加载 loading

├─ src

│ ├─ api # api 接口

│ ├─ assets # 静态资源 icon等

│ ├─ components # 全局组件

│ ├─ config # 全局配置

│ ├─ layout # 布局

│ ├─ router # 路由

│ ├─ store # 状态存储store

│ ├─ styles # 全局样式

│ ├─ utils # 全局公共方法

│ └─ views # 所有页面

│ ├─ App.vue # 入口页面

│ └─ main.ts # 入口文件

├─ tests # 单元测试

├─ .env.development # 开发环境

├─ .env.production # 正式环境

├─ .eslintrc.js # eslint 配置

├─ .prettier.config.js # prettier 配置

├─ tsconfig.json # ts 编译配置

└─ vite.config.ts # vite 配置

</code></pre>
        <p>配置</p>
        <ol>
          <li>一键安装 .vscode 中推荐的插件</li>
          <li>node 版本 16+</li>
        </ol>
        <p>克隆项目</p>
        <p>git clone ... （暂无提交git）</p>
        <p>安装依赖</p>
        <p>yarn</p>
        <p>启动项目</p>
        <p>yarn dev</p>
        <p>项目打包</p>
        <p>yarn build</p>
        <p>打包预览</p>
        <p>yarn preview</p>
        <p>路由配置</p>
        <pre><code>meat配置
meta: {
  // 设置该路由在侧边栏和面包屑中展示的名字
  title: &#39;title&#39;

  // 设置该路由的图标，记得将 svg 导入 @/icons/svg
  icon: &#39;svg name&#39;



  // 默认 false，设置 true 的时候该路由不会在侧边栏出现
  hidden: true


  // 单个菜单偏移的px

  left: &quot;10&quot;

  // 默认灰色 图标是否白色
  isWhite: true


  // 当一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式
  // 只有一个时，会将那个子路由当做根路由显示在侧边栏
  // 若想不管路由下面的 children 声明的个数都显示你的根路由
  // 可以设置 alwaysShow: true，这样就会忽略之前定义的规则，一直显示根路由
  children:[]
  alwaysShow: true

  // 示例: activeMenu: &quot;/xxx/xxx&quot;
  // 当设置了该属性进入路由时，则会高亮 activeMenu 属性对应的侧边栏
  // 该属性适合使用在有 hidden: true 属性的路由上
  activeMenu: &#39;/dashboard&#39;



  // 是否缓存该路由页面
  // 默认为 false，为 true 时代表需要缓存，此时该路由和该页面都需要设置一致的 Name
  keepAlive: false
}
  {
    path: &quot;/&quot;,
    component: Layouts,
    redirect: &quot;/Dashboard&quot;,
    meta: { title: &quot;Affilliate&quot;, icon: &quot;kb&quot;, isWhite: true },
    children: [
      {
        path: &quot;/Dashboard&quot;,
        component: () =&gt; import(&quot;@/views/Dashboard/index.vue&quot;),
        name: &quot;Dashboard&quot;,
        meta: {
          hidden: false,
          title: &quot;Dashboard&quot;,
          icon: &quot;kb&quot;,
        },
      },
    ],
  },
</code></pre>
        <p>使用全局 svg-icon 组件</p>
        <p>有全局 @/components/svg-icon 组件，把下载好的图标存放在 @/icons/svg 即可。</p>
        <p>无需在页面中引入组件，可直接使用</p>
        <pre><code>&lt;!-- name 为 svg 文件名 --&gt;
&lt;!-- class 可修改默认样式 --&gt;
&lt;svg-icon name=&quot;user&quot; font-size=&quot;20px&quot; class=&quot;icon&quot; /&gt;

</code></pre>
        <p>订单问题记录</p>
        <p>vue使用模板table渲染数据达到500时&#x20;</p>
        <p>1.渲染时间3-8秒不等 渲染期间卡住</p>
        <p>2.长列表形成的长dom造成了侧边栏动画不流畅，dom操作有延迟（500数据复选框全选）</p>
        <p>原因及问题思考</p>
        <p>1.<strong>响应式数据依赖</strong></p>
        <p>&#x9;双向绑定的必要性</p>
        <p>2.虚拟dom</p>
        <p>&#x9;⾸次渲染⼤量 DOM 时，由于多了⼀层虚拟 DOM 的计算，会⽐ innerHTML 插⼊慢</p>
        <p>3.浏览器单线程的操作</p>
        <p>4.丰富的内容嵌套</p>
        <p>&#x9;列表附带的dom同时生成，可以把出必要的内容，操作性的dom另外渲染（例如弹出层）</p>
        <p>解决方案</p>
        <p>1.虚拟列表（pass）</p>
        <p>2.懒加载（pass）</p>
        <p>&#x9;data 与 columns 从 ref 改 shallowRef&#x20;</p>
        <p>&#x20; 业务优化 去除tooltip disabled属性</p>
        <p>&#x9;data 与 columns 从 ref 改 shallowRef&#x20;</p>
        <p>&#x9;分批次50</p>
        <p>3.原生拼接</p>
        <p>&#x9;极致的优化标签嵌套，列表只显示必要的dom（例如弹出层的另外渲染不在列表生成）</p>
        <p>&#x9;跳过虚拟dom</p>
        <p>&#x9;纯dom渲染不做数据绑定</p>
        <p>&#x9;缺点：无法组件化，舍弃了双向绑定（例如我编辑修改本条数据，提交-获取-更改数据-双向绑定可以diff算法自动更改对应视图/原生需要获取要改变的dom元素手动修改，改变dom会导致页面重排）</p>
        <p>js渲染列表的封装</p>
        <pre><code>订单页包含11种列表类型，为了后面方便维护及效率，针对项目对js渲染表格的简单封装
导入
import DefaultTableJs from &quot;@/views/Order/ScaleOrder/DefaultTableJs/index.vue&quot;;
import { menuList } from &quot;@/utils/menu.js&quot;;
项目引用
    &lt;DefaultTableJs
      v-if=&quot;
        props.tabName === &#39;AwaitingConfirm&#39; || props.tabName === &#39;Processing&#39;
      &quot;
      :type=&quot;props.tabName&quot;
      :menuList=&quot;menuList.ScaleOrder.AwaitingConfirm&quot;
    /&gt;
参数
例如 Merchant菜单下Unfulfilled传入
根据list内容生成对应表头th并关联tb
  Merchant: {
    Unfulfilled: {
      key: &quot;AwaitingConfirm&quot;, //表格类型标识
      isCheckbox: true, //是否开启复选框
      menuType: &quot;Merchant&quot;, //tab类型
      list: [
        {
          title: &quot;Orders&quot;, //表格头标题
          rowspan: 1, //行合并数
          colspan: 1, //列合并数
          className: &quot;&quot;, //class类名
          key: &quot;Orders&quot;, //td类型标识
        },
        {
          title: &quot;Store&quot;,
          rowspan: 1,
          colspan: 1,
          key: &quot;Store&quot;,
        },
        {
          title: &quot;Shipping address&quot;,
          rowspan: 1,
          colspan: 1,
          key: &quot;ShippingAddress&quot;,
        },
        {
          title: &quot;Product&quot;,
          rowspan: 1,
          colspan: 1,
          key: &quot;Product&quot;,
        },
        {
          title: &quot;Action&quot;,
          rowspan: 1,
          colspan: 1,
          key: &quot;Action&quot;,
          className: &quot;tright&quot;,
        },
      ],
    },
</code></pre>
      </article>
    </div>
  </div>
</body>

</html>
